import { Meta, Story, Canvas } from '@storybook/addon-docs';

<Meta title="Getting Started/Patterns" id="getting-started-patterns" />

# Patterns

## Common DataTable Component

### JavaScript

If you use React Data Table across your application and you are customizing or using custom components often you'll find you are repeating alot of code.

The following pattern allows us to create a re-usable `DataTable` with our defaults baked in. In this case, we want to ensure all our tables are `dense` and have `pagination`, and finally let's override React Data Tables components with some material-ui sexiness:

```js
import React from 'react';
import DataTable from 'react-data-table-component';
import Checkbox from '@material-ui/core/Checkbox';

import ArrowDownward from '@material-ui/icons/ArrowDownward';

const sortIcon = <ArrowDownward />;
const selectProps = { indeterminate: isIndeterminate => isIndeterminate };

function DataTableBase(props) {
	return (
		<DataTable
			pagination
			selectableRowsComponent={Checkbox}
			selectableRowsComponentProps={selectProps}
			sortIcon={sortIcon}
			dense
			{...props}
		/>
	);
}

export default DataTableBase;
```

Now, instead of importing `DataTable` you would import your custom `DataTableBase` component and pass in your `columns`, `data` or whatever other React Data Tably property is needed:

```js
import React from 'react';
import DataTable from '../mycomponents/DataTableBase';

...

function MyComponent() {
	return <DataTable columns={columns} data={data} selectableRows />;
}

export default MyComponent;
```

### TypeScript

We can do the same in TypeScript:

```ts
import React from 'react';
import DataTable, { TableProps } from '../../src/index';
import Checkbox from '@material-ui/core/Checkbox';
import ArrowDownward from '@material-ui/icons/ArrowDownward';

const sortIcon = <ArrowDownward />;
const selectProps = { indeterminate: (isIndeterminate: boolean) => isIndeterminate };

function DataTableBase<T>(props: TableProps<T>): JSX.Element {
	return (
		<DataTable
			pagination
			selectableRowsComponent={Checkbox}
			selectableRowsComponentProps={selectProps}
			sortIcon={sortIcon}
			dense
			{...props}
		/>
	);
}

export default DataTableBase;
```

Usage:

```ts
import React from 'react';
import DataTable from '../mycomponents/DataTableBase';

...

function MyComponent() {
	return <DataTable columns={columns} data={data} selectableRows />;
}

export default MyComponent;
```
